<template>
	<view class="audio bottom">
		<view class="info-bar">
			<view class="info-left">
				<view class="name" style="font-size: 28rpx; color: #fff;">
					{{ list.length > 0 ? list[currentIndex].title : "当前无播放曲目" }}
				</view>
				<view class="album-name" style="font-size: 20rpx; color: #999; margin-top: 10rpx;">
					{{ list.length > 0 ? list[currentIndex].albumName : " " }}
				</view>
			</view>
			
			<view class="info-right" @click="close" style="width: 100rpx;">
				<image src="@/static/audio/clock.svg" mode="aspectFill" style="width: 20px; height: 20px;"></image>
				<uni-icons type="star" size="24" color="#fff"></uni-icons>
			</view>
		</view>
		<view class="progress-bar">
			<view class="progress-bg">
				<view class="progress" :style="{'width':progress+'%'}" />
				<movable-area style="width: 100%;">
					<movable-view :x="x" :y="y" class="" direction="horizontal" :animation="false" @change="onChange">
						<view class="speck"></view>
					</movable-view>
				</movable-area>
			</view>
			<view class="time-bar">
				<view class="">
					{{currentTime}}
				</view>
				<view class="">
					{{duration}}
				</view>
			</view>
		</view>
		
		<view class="control-bar">
			<view class="">
				<uni-icons type="refreshempty" size="24" color="#fff" @click="close"></uni-icons>
			</view>
			<view class="control">
				<image src="@/static/audio/next.svg" mode="aspectFill" class="control-icon" @click="prev"></image>
				<image v-if="playing" src="@/static/audio/stop.svg" mode="aspectFill" class="control-icon" @click="pause"></image>
				<image v-else src="@/static/audio/play.svg" mode="aspectFill" class="control-icon" @click="play"></image>
				<image src="@/static/audio/prev.svg" mode="aspectFill" class="control-icon" @click="next"></image>
			</view>
			<view class="">
				<uni-icons type="list" size="24" color="#fff"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				name: '专辑名称',
				duration: '00:00',
				currentTime: '00:00',
				playing: false,
				audio: {},
				currentIndex: 0,
				progress: 0,
				x: 0,
				y: 0,
				old: {
					x: 0,
					y: 0
				}
			}
		},
		created() {
			this.init()
		},
		props: {
			list:Array
		},
		methods: {
			play(list){
				if(list){
					this.list = list
				}
				const music = this.list[this.currentIndex];
				this.audio.title = music.title
				this.audio.singer = '暂无'
				this.audio.coverImgUrl = music.cover
				this.audio.src = music.src
				this.audio.play()
				console.log(music)
			},
			pause(){
				this.audio.pause()
			},
			init(){
				console.log('初始化')
				// #ifdef APP
				this.audio = uni.getBackgroundAudioManager();
				this.audio.onCanplay(() => {
					this.duration = this.formatDuration(this.audio.duration)
				})
				
				this.audio.onError(e => {
					console.log('播放错误')
					console.log(e)
				})

				this.audio.onPlay(e => {
					console.log('播放开始')
					this.playing = true
					this.$emit('callPlay', true)
				})
				
				this.audio.onTimeUpdate(() => {
					this.currentTime = this.formatDuration(this.audio.currentTime)
					this.percentage(this.audio.currentTime, this.audio.duration)
				})
				
				this.audio.onPause(e => {
					this.playing = false
					this.$emit('callPlay', false)
				})
				this.audio.onStop(e => {
					this.playing = false
					this.$emit('callPlay', false)
				})
				this.audio.onEnded(() => {
					this.next()
				})
				// #endif
				
			},
			close(){
				console.log()
				
			},
			formatDuration(seconds){
				seconds = Math.round(seconds)
				const hours = Math.floor(seconds / 3600);
				const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
				const remainingSeconds = (seconds % 60).toString().padStart(2, '0');
				let ret = minutes + ":" + remainingSeconds
				if(hours > 0){
					ret = hours.toString().padStart(2, '0') + ":" + ret
				}
				return ret
			},
			// 计算进度条
			percentage(seconds, duration){
				this.progress = seconds / duration * 100
			},
			next(){
				if(this.playing) this.audio.stop()
				if(this.currentIndex == this.list.length - 1){
					// uni.showToast({
					// 	title: "已经是最后一曲了"
					// })
					// return
					this.currentIndex = 0
				} else {
					this.currentIndex ++
				}
				this.play()
			},
			prev(){
				if(this.playing) this.audio.stop()
				this.currentIndex = this.currentIndex == 0 ? this.list.length - 1 : this.currentIndex - 1
				this.play()
			},
			tap: function(e) {
				this.x = this.old.x
				this.y = this.old.y
				this.$nextTick(function() {
					this.x = 30
					this.y = 30
				})
			},
			onChange: function(e) {
				console.log(e.detail.x)
				this.old.x = e.detail.x
				this.old.y = e.detail.y
			}
		},
		onDestroy(){
			console.log('制裁')
		}
	}
</script>

<style>
	.audio{
		background-color: #560601;
		padding: 30rpx;
		height: 260rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.info-bar{
		display: flex;
		justify-content: space-between;
		height: 60rpx;
	}
	.info-right{
		width: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.progress-bar{
		height: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.progress-bg{
		height: 1px;
		border-bottom: 1px solid rgba(255, 255, 255, .3);
	}
	.progress{
		height: 1px;
		border-bottom: 1px solid #fff;
		width: 50%;
	}
	.time-bar{
		display: flex;
		justify-content: space-between;
		font-size: 20rpx;
		color: #fff;
	}
	.control-bar{
		display: flex;
		justify-content: space-around;
	}
	.control{
		width: 300rpx;
		display: flex;
		justify-content: space-between;
	}
	.control-icon{
		width: 30px;
		height: 30px;
	}
	.speck{
		width: 10px;
		height: 10px;
		/* background-color: #fff; */
		background: radial-gradient(circle, rgba(255,255,255,1), rgba(255,255,255,1), rgba(255,255,255,0));
		margin-top: -5px;
		border-radius: 50%;
	}
</style>